import { NavBar, SearchBar, Toast, ErrorBlock } from 'antd-mobile';
import GoodsItem from '@/components/GoodsItem';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './list.less';
import { useEffect } from 'react';
import { connect } from 'dva';

const SearchList = (props) => {
  const { proList, dispatch } = props;
  // console.log(proList);
  const navigate = useNavigate();
  const [params] = useSearchParams()

  const back = () => {
    navigate(-1);
  };

  useEffect(() => {
    const key = params.get('searchlist')
    const id = params.get('category_id')
    const payload = {};
    if (key) {
      payload.key = key;
    }
    if (id) {
      payload.id = id;
    }
    dispatch({
      type: 'search/getSearchList',
      payload: payload
    });
  }, [dispatch]);

  const goDetail = (goodsId) => {
    console.log(goodsId);
    navigate(`/prodetail/${goodsId}`)
  };


  return (
    <>
      <div className="search">
        <NavBar backArrow={true} onBack={back}>商品列表</NavBar>

        <SearchBar
          // placeholder='请输入搜索关键词'
          value='搜索关键词'
          showCancelButton={() => true}
          onCancel={() => {
            console.log('dianjile');
          }}
        // onSearch={(value) => {
        //   goSearch(value)
        // }}
        />
        {/* <template #action>
          <van-icon class="tool" name="apps-o" />
        </template> */}

        {/* // 排序选项按钮 */}
        <div className="sort-btns">
          <div className="sort-item">综合</div>
          <div className="sort-item">销量</div>
          <div className="sort-item">价格 </div>
        </div>

        <div className="goods-list">
          {
            proList.length === 0 ? <ErrorBlock status='empty' /> : (proList.map((item, index) => {
              return <GoodsItem key={index} item={item} onClickPro={goDetail} />
            }))
          }
        </div>
      </div >
    </>
  )
};

const mapStateToProps = ({ search }) => {
  return {
    ...search
  }
};

export default connect(mapStateToProps)(SearchList);